import React from 'react';
import { Card, Descriptions, Tag, Divider, Button, Space, Breadcrumb } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import { Link, useParams, useNavigate } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './ReformDetail.module.less';

const ReformDetail: React.FC = () => {
  const { id } = useParams();
  const navigate = useNavigate();

  // 模拟数据
  const reform = {
    id,
    projectName: '示范区档案管理项目',
    projectCode: 'PRJ001',
    title: '档案系统功能优化',
    type: '系统问题',
    status: 'completed',
    createTime: '2024-03-16 10:30',
    completeTime: '2024-03-20 15:30',
    description: '系统性能优化已完成，具体改进如下：...',
    reformer: '张三',
    checker: '李四',
    checkResult: '通过',
    checkDescription: '系统性能符合要求，功能运行稳定'
  };

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: <Link to="/summary/reform">整改确认</Link>,
          },
          {
            title: '整改详情',
          }
        ]} />
      </div>

      <Card className={styles.detailCard}>
        <div className={styles.header}>
          <h2>{reform.title}</h2>
          <Space>
            <Tag color="blue">{reform.type}</Tag>
            <Tag color="success">已完成</Tag>
          </Space>
        </div>

        <Divider />

        <Descriptions column={2}>
          <Descriptions.Item label="所属项目">{reform.projectName}</Descriptions.Item>
          <Descriptions.Item label="项目编号">{reform.projectCode}</Descriptions.Item>
          <Descriptions.Item label="整改人">{reform.reformer}</Descriptions.Item>
          <Descriptions.Item label="复查人">{reform.checker}</Descriptions.Item>
          <Descriptions.Item label="开始时间">{reform.createTime}</Descriptions.Item>
          <Descriptions.Item label="完成时间">{reform.completeTime}</Descriptions.Item>
        </Descriptions>

        <Divider orientation="left">整改内容</Divider>
        <div className={styles.description}>{reform.description}</div>

        <Divider orientation="left">复查结果</Divider>
        <div className={styles.checkResult}>
          <p><strong>复查结论：</strong>{reform.checkResult}</p>
          <p><strong>复查说明：</strong>{reform.checkDescription}</p>
        </div>

        <Divider />

        <div className={styles.footer}>
          <Button onClick={() => navigate(-1)}>返回</Button>
        </div>
      </Card>
    </MainLayout>
  );
};

export default ReformDetail; 